<template>
    <div>
        <div class="article-container">
            <div class="daohang">公告列表</div><hr>
            <el-card v-for="(article, index) in articles" :key="index" class="article-card" v-if="articles.length > 0">
                <div class="style">
                    <div slot="header" class="clearfix header">
                        <span><a @click="navigateToRoute(article.noticeId)" class="title">{{ article.noticeTitle
                                }}</a></span><br />
                        <div class="notice-content">{{ stripHtmlTags(article.noticeContent) }}</div>
                    </div>
                    <div class="date">{{ article.releaseDate }}</div>
                </div>
            </el-card>

            <!-- 如果没有内容，显示提示信息 -->
            <div v-else class="no-articles">
                <el-empty description="暂无公告信息"></el-empty>
            </div>

            <!-- 分页组件 -->
            <el-pagination v-if="totalArticles > 0" background @current-change="handlePageChange" :current-page="currentPage"
                :page-size="pageSize" :total="totalArticles" layout="total, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
    data() {
        return {
            articles: [],
            currentPage: 1,
            pageSize: 10,
            totalArticles: 0,
        };
    },
    methods: {
        stripHtmlTags(content) {
          return content.replace(/<[^>]+>/g, ''); // 正则匹配移除 HTML 标签
        },
        fetchArticles() {
            axios.post('/repaircenter/repairNotice/list', {
                page: this.currentPage,
                pageSize: this.pageSize,
                noticeTitle: null, // 根据需要调整查询条件
                delFlag:0,
            })
            .then(response => {
                this.articles = response.data.data.list;
                this.totalArticles = response.data.data.total; // 获取总公告数
            })
            .catch(error => {
                console.error("获取公告失败:", error);
            });
        },
        navigateToRoute(noticeId) {
            this.$router.push({ path: '/notice-detail', query: { noticeId: noticeId } });
        },
        RouteHome() {
            this.$router.push('/index');
        },
        handlePageChange(page) {
            this.currentPage = page;
            this.fetchArticles(); // 页码变化时重新获取公告列表
        },
    },
    mounted() {
        this.fetchArticles(); // 页面加载时获取公告
    },
};
</script>

<style scoped>
.article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 110px;
}

.article-card {
    margin-bottom: 20px;
    width: 83%;
    height: 120px;
    text-align: left;
    border-radius: 5px;
}

.title {
    font-size: 18px;
    color: black;
}

.title:hover {
    color: rgba(0, 170, 255, 0.685);
}

.notice-content {
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #666;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    max-height: 3.8em;
    line-height: 1.8;
}

.header {
    width: 80%;
    float: left;
}

.date {
    float: left;
    width: 20%;
    font-size: 17px;
    color: #999;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.style {
    padding: 5px;
}

.daohang {
    width: 83%;
    text-align: left;
    border-bottom: 1px solid #00000017;
    background: url(../assets/img/icon-location-blue.png) no-repeat 0 8px;
    background-position: 0px,-12px;
    padding-left: 20px;
}

.daohang > a {
    color: #0000004d;
}

.daohang > span {
    color: #0000004d;
}

button {
    margin-left: 73%;
    margin-bottom: 15px;
}

.article-card:hover {
    background-color: rgba(0, 0, 0, 0);
}

.pagination {
    margin-right: 73%;
}
</style>